<template>
  <view class="play-box">
    <block v-for="item in list" :key="item.playName">
      <view class="play-title">
        <text class="play-title__h2">{{ item.playTitle }}</text>
      </view>
      <view class="play-list" v-if="item.list.length">
        <view v-for="sItem in item.list" :key="sItem.vid" class="play-list__li" @click="onJump(item.playName, sItem.vid)">
          <text class="ep">{{ firstNumber(sItem.title) }}</text>
        </view>
      </view>
    </block>
  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { firstNumber } from '@/utils'
import '@/utils/base64.min'
import authcode from '@/utils/authcode'
import playing from '@/utils/play'
export default {
  data() {
    return {
      list: []
    }
  },
  props: ['vid'],
  methods: {
    ...mapActions('play', ['getPlayerList']),
    firstNumber,
    getList() {
      this.getPlayerList({
        id: this.vid
      }).then(res => {
        const { key, list } = res.data
        this.key = key
        this.list = list || []
      })
    },
    onJump(name, vid) {
      const url = playing(name, authcode(atob(vid), 'DECODE', this.key, 0))
      uni.navigateTo({
        url: `${url === '/' ? `/pages/webview/index?url=${encodeURIComponent(url)}` : '/pages/index/index'}`
      })
    }
  },
  mounted() {
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.play {
  &-box {
    box-shadow: 0 1rpx 3rpx rgba(26, 26, 26, 0.1);
    padding: 10rpx 28rpx 20rpx;
  }

  &-title {
    display: flex;
    font-size: 32rpx;

    &__h2 {
      flex-grow: 1;
    }
  }

  &-list {
    display: flex;
    flex-flow: row wrap;
    width: 705rpx;

    &__li {
      height: 80rpx;
      line-height: 80rpx;
      margin-top: 20rpx;
      width: 88rpx;
      overflow: hidden;
      padding-right: 10rpx;

      &:nth-child(8n) {
        padding-right: 0;
      }

      .ep {
        border: 1px solid #ebebeb;
        height: 80rpx;
        font-size: 28rpx;
        border-radius: 10rpx;
        padding: 0 10rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      &.active {
        .ep {
          color: #0084ff;
          border-color: #0084ff;
        }
      }
    }
  }
}
</style>
